<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin-top: 100px;
        }

        #container {
            border: 3px dotted #3231ff;
            padding: 10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 6px;
            width: 500px;
            margin: auto;
        }

        .logo {
            width: 100px;
            height: 50px;
            border: 1px solid chartreuse;
            /*在flex布局中，auto有特殊的表现：
              它会吸收任何多余的空间，而剩下的元素
              会被推到容器的另一侧
            */
            /*margin-right: auto;*/
        }

        .magnifier {
            width: 50px;
            height: 50px;
            border: 1px solid dodgerblue;
            margin-left: auto;
        }

        .close {
            width: 50px;
            height: 50px;
            border: 1px solid dodgerblue;
            margin-left: auto;
        }

        .login {
            width: 100px;
            height: 50px;
            border: 1px solid chartreuse;
            /*在flexbox布局中，通过巧妙运用margin:auto的特性，
              可以轻松实现元素的灵活对齐。无论是将元素推向容器的
              右侧(margin-left:auto)、左侧(margin-right:auto)
              还是居中对齐(同时设置margin-right:auto和margin-left:auto)
              flexbox都能自动分配周围的空间来满足这些对齐需求。这种方法不仅简化了
              布局的过程，而且增强了页面的响应性和适应性，使得在不同屏幕
              尺寸和布局情况下都能保持一致的表现。
            */
            margin-left: auto;
            /*margin-right: auto;*/
        }
    </style>
</head>
<body>
<div id="container">
    <div class="logo">logo</div>
    <div class="login">login</div>
    <div class="magnifier">magnifier</div>
    <div class="close">close</div>
</div>
</body>
</html>